<template>
    <div>
        <el-row>
            <!-- span自己的宽带占12份 左侧边距6份 右侧也剩下6份 所以居中 -->
            <!-- <el-col :span="10" :offset="6"> -->
            <div class="content">
                <br>
                <p>欢迎登录</p><br>
                <!-- model 表单的数据 -->
                <!-- rules 校验的规则 -->
                <!-- label-width 文字的宽度 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <!-- .trim去除两端空格 -->
                        <el-input v-model.trim="ruleForm.username" prefix-icon="el-icon-user-solid" placeholder="请输入用户名"
                            style="width:400px ;" clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model.trim="ruleForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码"
                            style="width:400px ;" clearable>
                        </el-input><br>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">登录</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- </el-col> -->
        </el-row>
    </div>
</template>

<script>
import { userLogin } from '@/apis';
export default {
    data() {
        return {
            ruleForm: {
                username: "10086",
                password: "123456",
            },
            // 校验规则
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    {
                        min: 3,
                        max: 10,
                        message: "长度在 3 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                password: [{ required: true, message: "请填写密码", trigger: "blur" }],
            },
        };
    },
    methods: {
        // 点击按钮 提交表单
        submitForm() {
            // this.$refs.ruleForm 获取表单组件
            // validate 组件中自带的检验函数
            // valid校验的结果
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    // 成功
                    // alert("submit!");
                    let res = await userLogin(this.ruleForm);
                    console.log(1111, res);
                    this.$store.commit('saveUserInfo', res.list)
                    //数据存入vuex中
                    console.log(res);
                    this.$router.push('/')

                } else {
                    // 失败
                    console.log("error submit!!");
                    return false;
                }
                // if (this.username === 'anmin' && this.password === '666666') {
                //登录成功存储一个token
                // localStorage.setItem('token','Bearer xxxx')
                //跳转后台主页面
                // this.$router.push('/lyaout')
                // alert('yes')
                // }else{
                // localStorage.removeItem('token')
                // }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style>
body {
    background: url(../assets/bg1.jpg )no-repeat;
    /* background-size: auto; */
    background-size: cover;
}

.content {
    width: 600px;
    height: 400px;
    margin: 200px auto;
    text-align: center;
    color: #fff;
    font-size: 30px;
    background-color: rgba(255, 255, 255, 0.382);
    border-radius: 20px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
</style>